<template>
  <div class="container">
      <ul>
        <li>
          <a href="#">
            <img src="~/static/img/mobile-400x240.jpg"/>
            <div class="container-cg"><span>立体感强烈</span></div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="~/static/img/mobile-400x240.jpg"/>
            <div class="container-cg"><span>立体感强烈</span></div>
          </a> 
        </li>
        <li>
          <a href="#">
            <img src="~/static/img/mobile-400x240.jpg"/>
            <div class="container-cg"><span>立体感强烈</span></div>
          </a> 
          
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  layout: 'blog'
}
</script>

<style>

ul{
  text-align: center;
  width: 100%;
}
li{
  display:inline-block;
  margin: 50px 10px;
  width: 25%;
  position: relative;
}


.container-cg{
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  text-align: center;

}
.container-cg span{
  background-color: rgb(168, 190, 238);
  padding: 5px;
  border-radius: 15px;
  display: none;
}

img{
  width: 100%;
  box-shadow: 5px 5px 5px darkgrey;
}

a:hover .container-cg span{
  display: inline-block;
}

</style>
